const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin") //首页预览插件
const VueLoaderPlugin = require("vue-loader/lib/plugin")
const htmlPlugin = new HtmlWebpackPlugin({
  template: "./src/index.html",
  //生成的文件名称
  filename: "index.html"
})

module.exports = {
  // 编译模式
  mode: "development",

  entry: path.join(__dirname, "./src/index.js"),

  output: {
    path: path.join(__dirname, "./dist"), //输出文件的存放路径
    filename: "bundle.js" //输出文件的名称
  },
  plugins: [htmlPlugin, new VueLoaderPlugin()],
  module: {
    rules: [
      { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },
      { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] },
      { test: /\.css$/, use: ["style-loader", "css-loader", "postcss-loader"] },
      {
        test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
        use: ["url-loader?limit=26940"]
      },
      { test: /\.js$/, use: "babel-loader", exclude: /node_modules/ },
      { test: /\.vue$/, use: ["vue-loader"] }
    ]
  }
}

// development  开发模式，编译后代码不会被压缩      (开发用)
// production   生产模式，编译后代码被混淆、压缩    (线上用)
